<template>
  <div>
    <van-sticky>
      <van-search shape="round" placeholder="请输入搜索关键词">
        <template #left>
          <van-icon @click="onClickLeft" size="1.3rem" style="margin-right: 12px;" name="arrow-left" />
        </template>
      </van-search>
    </van-sticky>
    <div class="sidEbar">
      <div>
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="(item,index) in goods_category" :key="index" :title="item.name" />
        </van-sidebar>
      </div>
      <div>
        <div v-for="(item, index) in goods_category[levelnum].level2" :key="index" style="margin-left: 10px;">
          <div v-if="item.level3.length">
            <b v-text="item.name"></b>
            <van-list>
              <van-grid :column-num="3" :border="false">
                <van-grid-item @click="gotoinfo(it.id)" style="width: 20vw;" v-for="(it,i) in item.level3" :key="i">
                  <van-image :src="it.img" />
                  <van-cell :title="it.name" />
                </van-grid-item>
              </van-grid>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  import router from '@/router'
  export default {
    name: 'sidEbar',
    data() {
      return {
        activeKey: 0,
        levelnum: 0
      }
    },
    methods: {
      gotoinfo(id) {
        if (id) {
          router.push({
            path: '/Details/' + id
          })
        } else {
          this.$toast.fail('暂时没有数据')
        }
      },
      onClickLeft() {
        router.push('Home')
      },
      ...mapMutations(['SET_GOODS_CATEGORY']),
      getBannerImages(n) {
        this.$api.homeData.goods_category(n).then(res => {
          this.SET_GOODS_CATEGORY(res.data)
        })
      },
      onChange(index) {
        window.scrollTo(0, 0)
        this.levelnum = index
        this.getBannerImages(this.goods_category[index].id)
      }
    },
    computed: {
      ...mapState(['goods_category'])
    },
    created() {
      this.getBannerImages(0)
    }
  }
</script>

<style>
  .sidEbar {
    display: flex;
  }
</style>
